<template>
  <div v-if="showPage">
    <div v-if='!isEmpty'>
      <el-tabs type="border-card">
        <el-tab-pane label="店铺信息">
          <el-descriptions title="我的店铺" :column="3" border>
            <el-descriptions-item label="店铺名称">{{ shopInfo.shopName }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ shopInfo.telephone }}</el-descriptions-item>
            <el-descriptions-item label="银行账户">{{ shopInfo.bankAccount }}</el-descriptions-item>
            <el-descriptions-item label="店铺余额">{{ shopInfo.money }}元</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="店铺商品">
          <div v-show="activities.length">
            <div v-show="isShow">
              <div class="collapseHead">
                <el-radio-group v-model="sort" style="margin-right: 40px">
                  <el-radio :label="0">降序</el-radio>
                  <el-radio :label="1">升序</el-radio>
                </el-radio-group>
                <el-button type="primary" @click="changeIsShow">添加商品</el-button>
              </div>
              <el-collapse v-model="activeName">
                <el-collapse-item v-for="(goods, index) in sortTime" :name="index">
                  <template slot="title">
                    <i class="el-icon-date"></i>&nbsp;{{goods.created}}
                  </template>
                  <div class="list">
                    <div class="item" v-for="value in goods.goods" @click.stop="showGood(value)">
                      <img :src="value.picGoods">
                      <span class="goodsName">{{value.goodsName}}</span>
                      <span>
                        <i style="color: red; font-style: normal; font-size: 25px; margin-right: 10px">￥{{value.price}}</i>
                        <el-tag size="medium">{{value.discount}}折</el-tag>
                      </span>
                      <img v-if="value.pass === 1" style="width: 20px" src="../../assets/pass.png">
                      <img v-if="value.pass === 0" style="width: 20px" src="../../assets/wait.png">
                      <img v-if="value.pass === -1" style="width: 20px" src="../../assets/unpass.png">
                      <img v-if="value.pass === 2" style="width: 20px" src="../../assets/unuse.png">
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <el-dialog :width="'300px'" title="商品详情" :visible.sync="goodDialog" :close-on-click-modal="false">
                库存：<el-input-number v-model="good.piece" :step="1" :min="0"></el-input-number>件
                <div style="margin-top: 20px; margin-left: 50px">
                  <el-button type="danger" v-show="good.pass === 1" @click="good.pass = 2">下架</el-button>
                  <el-button type="danger" v-show="good.pass === 2" @click="good.pass = 1">上架</el-button>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="goodDialog = false">取 消</el-button>
                  <el-button type="primary" @click="changeGood">确 定</el-button>
                </span>
              </el-dialog>
            </div>
          </div>
          <div v-show="!activities.length && isShow">
            <el-empty description="还没有发布商品哦！">
              <el-button type="primary" @click="isShow = !isShow">添加商品</el-button>
            </el-empty>
          </div>
          <div v-show="!isShow">
            <el-button @click="changeIsShow" type="primary">返回</el-button>
            <AddProduct :shopId="shopInfo.id" :changeIsShow="changeIsShow"></AddProduct>
          </div>
        </el-tab-pane>
        <el-tab-pane label="店铺订单">
          <div>
            <el-radio-group v-model="radio1">
              <el-radio-button label="1">所有订单</el-radio-button>
              <el-radio-button label="2">待发货</el-radio-button>
              <el-radio-button label="3">待确认收货</el-radio-button>
              <el-radio-button label="4">退货中</el-radio-button>
              <el-radio-button label="5">已完成</el-radio-button>
            </el-radio-group>
          </div>
          <div class="orderInfo" v-for="(order, index) in orderFilter">
            <div class="orderHeader">
              <span style="margin-right: 40px">购买时间：{{ order.order.created }}</span>
              <span>买家：{{ order.user.username }}</span>
            </div>
            <div class="orderMain">
              <table class="tab1">
                <tbody>
                <tr>
                  <td width="400px">
                    <table class="tab2">
                      <tbody>
                      <tr>
                        <td width="20px"></td>
                        <td width="80px">
                          <img class="pic" :src="order.good.picGoods">
                        </td>
                        <td>
                          <a>
                            <span>{{ order.good.goodsName }}</span>
                          </a>
                        </td>
                        <td>
                          <span>×{{ order.order.num }}</span>
                        </td>
                        <td>
                          <span>{{ order.good.price }}元/件</span>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </td>
                  <td class="td01" width="120px">
                    <p>订单总额（元）</p>
                    <p>{{ order.order.price }}</p>
                  </td>
                  <td class="td01">
                    <span>{{orderState(order.order)}}</span>
                  </td>
                  <td class="td01">
                    <el-button type="primary" @click="orderBtnClick(order.order, index)">{{orderBtn(order.order)}}</el-button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <div class="orderFooter">
              <span>收货人信息：{{order.address.name}}，{{order.address.telephone}}，{{order.address.city}}{{order.address.address}}</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else>
      <el-empty :description="errMsg">
        <el-button v-if="errMsg === description" type="primary" @click="register">立即注册</el-button>
      </el-empty>
    </div>
  </div>
</template>

<script>
import AddProduct from '@/components/myShop/addProduct'
export default {
  name: "myShop",
  components: {AddProduct},
  data() {
    return {
      shopInfo: {
        id: '',
        shopName: '',
        telephone: '',
        bankAccount: '',
        created: '',
        money: ''
      },
      description: '未注册店铺！！！',
      errMsg: '',
      showPage: false,
      isShow: true,
      reverse: true,
      activities: [],
      activeName: [],
      sort: 0,
      orders: [],
      radio1: "1",
      goodDialog: false,
      good:{}
    }
  },
  computed: {
    isEmpty(){
      return this.shopInfo.shopName === "";
    },
    sortTime(){
      this.activeName = []
      if(this.sort === 0){
        return this.activities.sort(this.sortAsceOrder)
      }else{
        return this.activities.sort(this.sortDescOrder)
      }
    },
    orderState(){
      return function (order) {
        if(order.delived === 0){
          return "待发货"
        }else{
          if(order.getGood === 0 && order.reGood === 0){
            return "待收货"
          }else if(order.getGood === 1){
            return "买家已收货"
          }else if(order.reGood === 1){
            return "退货中"
          }else if(order.reGood === 2 || order.reGood === 3){
            return "退货完成"
          }
        }
      }
    },
    orderBtn(){
      return function (order) {
        if(order.delived === 0){
          return "发货"
        }else if(order.getGood === 0){
          if(order.reGood === 0){
            return "已发货"
          }else if(order.reGood === 1){
            return "确认退货"
          }else if(order.reGood === 2){
            return "退货成功"
          }
        }else{
          return "订单已完成"
        }
      }
    },
    orderDialog(){
      return function (order) {
        if(this.orderBtn(order) === "发货"){
          return "确定是否已经发货？"
        }else if (this.orderBtn(order) === "已发货"){
          return "等待买家收货"
        }else if (this.orderBtn(order) === "确认退货"){
          return "商品退货中"
        }else if (this.orderBtn(order) === "退货成功"){
          return "退货已完成"
        }else if(this.orderBtn(order) === "订单已完成"){
          return "交易成功"
        }
      }
    },
    orderFilter(){
      if(this.radio1 === "1"){
        return this.orders
      }else if(this.radio1 === "2"){
        return this.orders.filter(o => {
          return o.order.delived === 0
        })
      }else if(this.radio1 === "3"){
        return this.orders.filter(o => {
          return o.order.delived === 1 && o.order.getGood === 0 && o.order.reGood === 0
        })
      }else if(this.radio1 === "4"){
        return this.orders.filter(o => {
          return o.order.delived === 1 && o.order.getGood === 0 && o.order.reGood === 1
        })
      }else if(this.radio1 === "5"){
        return this.orders.filter(o => {
          return (o.order.delived === 1 && o.order.getGood === 1) ||
              (o.order.delived === 1 && o.order.getGood === 0 && o.order.reGood > 1)
        })
      }
    }
  },
  methods: {
    register(){
      this.$router.push({
        path: '/home/br'
      })
    },
    changeIsShow(){
      this.isShow = !this.isShow
      if(this.isShow){
        this.getMyProducts()
      }
    },
    getShopInfo(){
      const userId = JSON.parse(sessionStorage.getItem("userInfo")).id
      this.$axios.get(`/business?userId=${userId}`)
          .then(res => {
            this.showPage = true
            const data = res.data.data
            if(data !== null){
              this.shopInfo = data
              this.getMyProducts()
            } else {
              this.errMsg = res.data.msg
              if(this.errMsg !== this.description){
                this.$message.error(this.errMsg)
              }
            }
            this.getOrder()
          }).catch(err => {
        this.showPage = true
      })
    },
    getMyProducts(){
      this.$axios.get(`/goods/${this.shopInfo.id}`)
          .then(res => {
            this.activities = res.data.data
          })
    },
    sortDescOrder(time1, time2){
      var year = time1.created.split('-')[0]*1 - time2.created.split('-')[0]*1
      if(year !== 0){
        return year
      }else{
        var month = time1.created.split('-')[1]*1 - time2.created.split('-')[1]*1
        if(month !== 0){
          return month
        } else {
          var day = time1.created.split('-')[2]*1 - time2.created.split('-')[2]*1
          if(day !== 0){
            return day
          }else{
            return 0
          }
        }
      }
    },
    sortAsceOrder(time1, time2){
      return -this.sortDescOrder(time1, time2)
    },
    showGood(value){
      this.goodDialog = true
      this.$set(this.good, 'id', value.id)
      this.$set(this.good, 'piece', value.piece)
      this.$set(this.good, 'pass', value.pass)
    },
    changeGood(){
      this.$axios.post("/changeGood", {
        id: this.good.id,
        piece: this.good.piece,
        pass: this.good.pass
      }).then(res => {
        this.goodDialog = false
        this.$message.success("修改成功")
        this.getMyProducts()
      })
    },
    getOrder(){
      this.$axios.get(`/getOrderShop/${this.shopInfo.id}`)
          .then(res => {
            this.orders = res.data.data
            this.orders.forEach(o => {
              o.good.picGoods = "data:image/jpeg;base64,"+o.good.picGoods
              o.order.created = o.order.created.replace("T", " ")
            })
          })
    },
    orderBtnClick(order, index){
      this.$confirm(this.orderDialog(order), '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        let url = null
        if(this.orderBtn(order) === "发货") {
          url = "/delived"
        }else if(this.orderBtn(order) === "确认退货"){
          url = "/confirmReGood"
          this.$axios.post("/reMoney", {
            price: order.actualPrice,
            bankAccount: this.orders[index].user.bankaccount
          })
        }
        if(url != null){
          this.$axios.post(url, order)
              .then(res => {
                this.getOrder()
              })
        }
      })
    },
  },
  created() {
    this.errMsg = this.description
    this.getShopInfo()
  }
}
</script>

<style scoped>
img{
  width: 100%;
}
.list{
  /*max-height: 800px;*/
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /*border: 2px solid red;*/
}
.item{
  margin: 10px 18px;
  width: 200px;
  height: 280px;
  /*border: 2px solid green;*/
  background-color: #F5F5F5;
}
.item:hover{
  box-shadow: #B3C0D1 0 0 15px;
  width: 201px;
  cursor: pointer;
}
.collapseHead{
  margin: 15px 0;
  line-height: 20px;
}
.goodsName{
  display: block;
  padding-left: 5px;
  font-size: 15px;
}
.orderInfo{
  border: 1px solid #A4C8E8;
  width: 100%;
  height: 200px;
  position: relative;
  margin-top: 20px;
  /*background-color: red;*/
}
.orderHeader{
  /*border: 1px solid blue;*/
  position: relative;
  /*width: 100%;*/
  height: 40px;
  background-color: #DEEBF7;
  line-height: 40px;
  padding-left: 20px;
}
.orderMain{
  border: 1px solid #A4C8E8;
  border-left: none;
  border-right: none;
  position: relative;
  width: 100%;
  height: 120px;
  /*background-color: yellow;*/
}
.orderFooter{
  /*border: 1px solid green;*/
  position: relative;
  /*width: 100%;*/
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  /*background-color: #DEEBF7;*/
}
.tab1{
  width: 100%;
  height: 120px;
  /*background-color: blue;*/
}
.tab2{
  width: 100%;
  height: 80px;
}
.pic{
  width: 80px;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
.td01{
  border-left: 2px dotted #dcdcdc;
  text-align: center;
}
</style>